<ion-header>
  <ion-toolbar>
    <ion-title class="chat-title" mode="ios">微信<span *ngIf="unread>0">({{unread<100?unread:'99+'}})</span></ion-title>
    <app-head-toolbar return-url="/tabs/chats" slot="end"></app-head-toolbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list class="chat-list">
    <ion-item class="chat-item" *ngFor="let item of messages" (press)="itemPressed($event, item)" (tap)="itemTapped(item)" [ngClass]="{'chat-item-active': item.active}" [style.touch-action]="'pan-y'">
      <ion-thumbnail class="chat-image" slot="start">
        <img [src]="item.image">
        <div class="chat-badge" [ngClass]="{'digist': !item.nohup}" *ngIf="item.unread>0">{{item.nohup?'':(item.unread>99?'99+':item.unread)}}</div>
      </ion-thumbnail>
      <ion-label>
        <div class="chat-row margin-bottom-5">
          <span class="name">{{item.name}}</span>
          <span class="time">{{item.time|dateText}}</span>
        </div>
        <div class="chat-row">
          <span class="message">{{item.message}}</span>
          <span class="nohup">
            <ion-icon *ngIf="item.nohup" slot="icon-only" name="warning-outline"></ion-icon>
          </span>
        </div>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>